<template>
	<view>
		<!-- 订单列表 -->
		<u-empty v-if="orderList.length==0" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
		</u-empty>
		<view v-for="item in orderList" :key="item.id" class="dispatchOrder">
			<view class="createTime">下单时间：{{item.createTime}}</view>
			<view class="orderGoodsList">
				<OrderGoods v-for="goods in item.orderGoodsInfoList" :key="goods.goodsId" :goods="goods"></OrderGoods>
			</view>
			<view class="description">
				共<text class="orderGoodsNumber">{{item.orderGoodsInfoList.length}}</text>种商品，总价：<text class="orderTotalPrice">￥{{item.totalPrice}}</text>
			</view>
			<view class="operations" v-if="item.status == 0">
				<button class="cancelBtn">取消订单</button>
				<button class="payBtn" @click="pay(item.id)">立即付款</button>
			</view>
			<view class="orderInfo" v-else>
				<view class="payTime">付款时间：{{item.payTime}}</view>
				<view v-if="item.status == 1" class="message">等待发货中</view>
				<view style="clear: both;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import OrderGoods from '../OrderGoods.vue'
	export default {
		name: 'DispatchOrder',
		props: ['orderStatus'],
		components:{
			OrderGoods
		},
		data() {
			return {
				status: 0,
				orderList: []
			}
		},
		beforeMount() {
			this.getOrderList()
		},
		methods: {
			changeOrderStatus(index) {
				this.status = index;
				this.getOrderList();
			},
			async getOrderList() {
				const res = await this.$myRequest({
					url: 'order/applet/getUserAllDispatchOrderWithStatus/' + this.status
				})
				if (res && res.code === 0) {
					this.orderList = res.data
				}
			},
			async pay(id){
				const res = await this.$myRequest({
					url: 'order/applet/payByUser/'+id,
					method:'post'
				})
				if(res && res.code === 0){
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					this.getOrderList();
				}
			}
		}
	}
</script>

<style lang="scss">
	
	page{
		background-color: F8F8F8;
	}
	
	.dispatchOrder{
		margin-bottom: 20rpx;
		width: 100%;
		
		.createTime{
			background-color: white;
			text-align: center;
			height: 70rpx;
			margin: 10rpx 0;
			font-size: 35rpx;
			line-height: 70rpx;
		}
	
		.description{
			background-color: white;
			text-align: right;
			height: 70rpx;
			margin: 10rpx 0;
			padding-right: 20rpx;
			font-size: 35rpx;
			line-height: 70rpx;
			
			.orderGoodsNumber{
				color: red;
			}
			.orderTotalPrice{
				color: red;
			}
		}
		.operations{
			padding: 10rpx 0;
			background-color: white;
			display: flex;
			.cancelBtn{
				background-color: white;
				height: 60rpx;
				font-size: 35rpx;
				line-height: 60rpx;
				color: #999999;
				margin-left: 300rpx;
			}
			
			.payBtn{
				height: 60rpx;
				font-size: 35rpx;
				line-height: 60rpx;
				background-color: #5AC725;
				color: white;
			}
		}
	
		
		.orderInfo{
			height: 60rpx;
			padding: 10rpx 0;
			background-color: white;
			font-size:35rpx;
			color: #999999;
			
			.payTime{
				float: left;
				margin-left: 10rpx;
			}
			
			.message{
				float: right;
				margin-right: 20rpx;
			}
		}
	}
	
</style>
